<template>
  <!-- <div class="couponDiv">
    <div class="conponTab">
      <div :class="{'active':currentTab == 2}"  @click="handelCurrentTab(2)" >未使用</div> 
      <div :class="{'active':currentTab == 4}"  @click="handelCurrentTab(4)">已使用</div>
    </div>  
    <div v-if="cardList.length>0">
      <card-item :cardList="cardList"></card-item>
    </div>
    <div v-if="cardList.length == 0" class="lackcardDiv">
      <div class="lackcard"><img src="/static/images/user/lackcard.png" alt=""></div>
      <p>暂无相关卡券~</p>
    </div>
  </div> -->
  <div>
    <div class="head">
      <div class="head_one" :class="{head_one_active : index == headListIndex}" v-for="(item,index) of headList" :key="index" @click="changeTab(index,item.type)">{{item.name}}</div>
    </div>
    <div class="contnet" v-if="list.length>0">
      <div class="content_one" v-show="type == 3" v-for="(item,index) of list" :key="index" @click="checkIcon(item.pic)">
        <img class="content_one_icon" src="https://static.daoyintech.com/kqyx.png" alt="">
      </div>
      <div class="content_one" v-show="type == 2" v-for="(item,index) of list" :key="index">
        <img class="content_one_icon" src="https://static.daoyintech.com/kqwx.png" alt="">
      </div>
    </div>

    <div class="lackCollectPage" v-else>
      <div class="lackCollectTxt">
        <div><img src="/static/images/lack/lackCollect.png"></div>
        <p>暂无优惠券哟~</p>
      </div>
    </div>

    <div class="icon_all" v-if="showIcon" @click="closeIcon">
      <img class="icon" :src="icon" alt="">
    </div>
  </div>
</template>

<script>
  // import cardItem from './card-item.vue'
  export default {
    // components:{
    //   cardItem
    // },
    data(){
      return{
        // currentTab: 2,
        // cardList: []
        headList:[
          {name:'有效',type:3},
          {name:'已失效',type:2}
        ],
        headListIndex:0,
        type:3,
        list:[],
        icon:null,
        showIcon:false
      }
    },
    onShow(){
      // this.getCard(2)
      this.getData()
    },
    methods:{
      // getCard (index){ 
      //   this.$http.get(`card?status=${index}`).then((res)=>{
      //     this.cardList = res.data.data
      //   })    
      // },
      // handelCurrentTab (tab){ //tab切换
      //   this.currentTab = tab;
      //   this.getCard(tab)
      // }
      getData(){
        this.$http.get(`userCoupon/getMyCoupon?type=` + this.type + '&page=0&size=100').then((res)=>{
          this.list = res.data.data.list
        }) 
      },
      changeTab(index,type){
        if(this.headListIndex == index){
            return
        }
        this.headListIndex = index
        this.type = type
        this.list = []
        this.getData()
      },
      checkIcon(icon){
        this.icon = icon
        this.showIcon = true
        console.log(icon)
      },
      closeIcon(){
        this.getData()
        this.showIcon = false
      }
    }
  }
</script>
<style scoped>
/* .couponDiv{
  background: #efeff4;
  width: 100%;
  min-height: 100%;
  position: absolute;
  top: 0;
}
.couponDiv .conponTab{
  display: flex;
  height: 88rpx;
  width: 100%;
  align-items: center;
  font-size: 28rpx;
  color: #d2d2d2;
  background: #fafafa;
}
.couponDiv .conponTab div{
  height: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.couponDiv .conponTab div.active{
  color: #000;  
}
.couponDiv .tabIndetail{
  padding: 0 64rpx;
  overflow: hidden;
}
.lackcardDiv p{
  text-align: center;
  font-size: 30rpx;
  color: #adadad;
  margin-top: 25rpx;
}
.lackcard{
  width: 177rpx;
  height: 169rpx;
  margin: 50% auto 0;
}
.lackcard img{
  width: 100%;
  height: 100%;
  display: block;
} */

.head{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 98rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #ffffff;
}
.head_one{
  height: 98rpx;
  width: 100rpx;
  font-size: 30rpx;
  color: #666666;
  line-height: 98rpx;
  text-align: center;
}
.head_one_active{
  color: #FF7244;
  border-bottom: 2rpx solid #FF7244;
  font-size: 32rpx;
}
.contnet{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 120rpx;
}
.content_one{
  margin-bottom: 30rpx;
}
.content_one_icon{
  width: 696rpx;
  height: 177rpx;
}

.lackCollectPage{
  width: 100%;
  height: 100%;
  margin-top: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.lackCollectPage .lackCollectTxt div{
  width: 260rpx;
  height: 228rpx;
  margin: 0 auto;
}
.lackCollectPage .lackCollectTxt div img{
  width: 100%;
  height: 100%;  
}
.lackCollectPage .lackCollectTxt p{
  text-align: center;
  font-size: 30rpx;
  color: #adadad;
  margin-top: 25rpx;
}
.icon_all{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0,0,0,0.67);
  display: flex;
  justify-content: center;
  align-items: center;
}
.icon{
  width: 400rpx;
  height: 400rpx;
}
</style>
